<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉表单</title>
<style type="text/css">
* {
    margin:0px;
    padding:0px;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
/*下拉框*/
.select-ipt {color:#888888;cursor: pointer;background: url(select.jpg) no-repeat center right;
border:1px #ccc solid;cursor:pointer;width:73px;height: 29px;margin:0px 0px 0px 0px;padding:3px 0px 0px 0px;
line-height:29px;font-size:14px;}
/*样式一：下拉一排一个*/
.select-list {border: 1px #ccc solid;width:73px;margin-left:0px;position:absolute;z-index:10000;background:#fff;}
.select-list span{cursor:pointer;display:block;width:100%;height:22px;line-height:22px;padding:0;font-size:14px;}
.select-list span:hover{background:#f6615b;color:#fff}

</style>
</head>
<body>
<div id="selectYear">
    
      <span id="1" name="myspan" onclick="display(1)">1992</span><br>
      <span id="2" name="myspan" onclick="display(2)">1993</span><br>
      <span id="3" name="myspan" onclick="display(3)">1994</span><br>
      <span id="4" name="myspan" onclick="display(4)">1995</span><br>
      <span id="5" name="myspan" onclick="display(5)">1996</span><br>
      <span id="6" name="myspan" onclick="display(6)">1997</span> 
    
    
</div>  

<div>
  <input type="button" value="取消" onclick="cancel()">
</div>

<script type="text/javascript" >

      var color;
      
      function display (val) {
    	  
    	  var obj = document.getElementById(val);
    	  
    	  obj.style.backgroundColor="blue";
    	  
      }
      
      function cancel() {
    	  
    	  var items = document.getElementsByName('myspan')
    	  
    	  for (var i =0;i<items.length;i++) {
    		  
    		  items[i].style.backgroundColor="#FFFFFF";
    	  }
    	
      }

</script>
</body>
</html>
